<template>
<div>
  <el-row>
    <el-col :span="24">
      <div></div>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="6" :xs="24"><div></div></el-col>
    <el-col :span="6" :xs="24"><div></div></el-col>
    <el-col :span="12" :xs="24"><div></div></el-col>
  </el-row> 
  
  <div>
    <i class="el-icon-edit"></i>
    <i class="el-icon-share"></i>
    <i class="el-icon-delete"></i>
      
  </div>
    <div class="alignDiv">
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button> 
      <el-button type="primary" icon="el-icon-search">搜索</el-button>
      <el-color-picker></el-color-picker>
      <el-button type="info" @click="toTest">路由测试</el-button> 
      fdasf
    </div>
    <span>fffffff <span>fffffff</span></span>
    <div style="height:1500px;" >fadsa
        fdsa
    </div>
</div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    toTest(){
      this.$router.push('/test');
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .div{color: red;}
</style>
